<script lang="ts" setup>
import {ref} from 'vue'
defineProps<{
  data:{label: string}[]
}>()
const emits = defineEmits<{
  (e:'change',active:number):void
}>()
const active = ref(0)
const changeTab = (index:number)=>{
  active.value = index
  //发射自定义事件
  emits('change',index)
}
</script>

<template>
  <view class="custom-tabs">
    <view class="custom-tabs-bar" v-for="(item, i) in data" :key="i" :class="{ active: i == active }"
      @click="changeTab(i)">
      <text class="tabbar-text">{{ item.label }}</text>
    </view>
  </view>
</template>


<style lang="scss" scoped>
// 自定义tabbar
.custom-tabs {
  display: flex;
  position: relative;
  padding: 0 30rpx;
}

.custom-tabs-bar {
  height: 80rpx;
  line-height: 80rpx;
  color: #979797;
  margin-right: 30rpx;
  position: relative;

  &.active {
    color: #121826;
    font-weight: 500;
    border-bottom: 2px solid #2cb5a5;
  }
}

.tabbar-text {
  font-size: 30rpx;
}

.custom-tabs-cursor {
  position: absolute;
  bottom: 3px;
  left: 20px;

  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: #2cb5a5;
  transition: all 0.3s ease-out;
}
</style>